<template>
	<view class="area-nav" :style="{'padding-top': statusbar_height + 'px'}">
		<view class="nav">
			<view class="nav-left" @click="navBack">
				<image src="/pagesShop/static/left.svg" mode=""></image>
			</view>
			<view class="nav-center">
				<view class="nav-search">
					<image class="search-icon" src="/pagesShop/static/search2.png" mode=""></image>
					<input type="text" placeholder="商品/关键词" v-model="value_in">
				</view>
			</view>
			<view class="nav-right"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			value: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				statusbar_height: uni.getSystemInfoSync().statusBarHeight,
				value_in: '',
			}
		},
		watch:{
			value(v) {
				this.value_in = v
			},
			value_in(v) {
				this.$emit('input',v)
			}
		},
		methods:{
			navBack() {
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.area-nav {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		padding-top: var(--status-bar-height);
		background-color: #00b4ff;
		
		.nav {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 44px;
			background-color: #00b4ff;
		}
		
		.nav-left,
		.nav-right {
			flex-shrink: 0;
			width: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
		
		.nav-center {
			flex-grow: 1;
			display: flex;
			align-items: center;
			font-size: 36rpx;
			color: #fff;
			
			.nav-center-text {
				width: 100%;
				text-align: center;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		
		.nav-search {
			position: relative;
			
			input {
				box-sizing: border-box;
				width: 400rpx;
				height: 28px;
				background-color: #fff;
				padding: 0 20rpx 0 75rpx;
				border-radius: 28rpx;
				font-size: 26rpx;
				color: #333;
			}
			
			.search-icon {
				width: 16px;
				height: 16px;
				position: absolute;
				left: 12px;
				top: 8px;
			}
		}
	}
</style>
